/**
 * Created by dio on 2017/2/21 0021.
 */
import React from "react";
import {ScrollView, View} from "react-native";
import chjStyle from "../../../CustomStyle";
import ModuleCommonHeader from "../../module/ModuleCommonHeader";
import Util from "../../Util";
import InputTextItem from "../common/InputTextItem";
import DateInputTextItem from "../common/DateInputTextItem";
import CommonTextItem from "../common/CommonTextItem";
import CommonPhotoSelection from "../common/CommonPhotoSelection";
import SingleSelectionTextItem from "../common/SingleSelectionTextItem";
import NextButton from "../common/NextButton";
import {ActionConst, Actions} from "react-native-router-flux";

export default class WarrantyInfo extends React.Component {
    // 构造函数，可执行初始化操作
    constructor(props) {
        super(props);
        // 在ES6，在构造函数里初始化state
        this.state = {};
        if (!Util.selectCar.warrantyinfo) {
            Util.selectCar.warrantyinfo = [
                {value: "CZB" + Util.randRange(100, 999) + new Date().getTime(), name: "质保单号"},
                {value: Util.selectCar.basicinfo.vehiclevincode.value, name: "VIN码"},
                {value: "", name: "经销商", canbenull: true},
                {value: "", name: "商户销售员", canbenull: true},
                {value: "", name: "车辆购置价(万元)", canbenull: true},
                {value: "", name: "此次购车时间", canbenull: true},
                {value: "", name: "质保产品"},
                {value: "铭牌#null#null,里程表#null#null,行驶本#null#null,附件#null#null", name: "质保产品图片"},
                {value: "", name: "备注", canbenull: true}
            ];
        }
    }

    // 组件被加载时
    componentDidMount() {

    }

    // 组件即将被卸载时
    componentWillUnmount() {
    }

    // 组件被渲染时
    render() {
        return (
            <View style={chjStyle.mainContainer}>
                <ModuleCommonHeader title='质保信息(06)' leftText='返回' clickedRight={this.clickedNew.bind(this)}
                                    rightText='保存'/>
                <ScrollView
                    style={chjStyle.mainList}>
                    {
                        Util.selectCar.warrantyinfo.map((item, i) => this.renderItem(item, i))
                    }
                </ScrollView>
                <NextButton onClickedListener={() => this.clickedNew()}/>
            </View>
        );
    }

    renderItem(item, i) {
        switch (i) {
            case 5:
                return <DateInputTextItem object={item}/>
            case 6:
                return (<SingleSelectionTextItem object={item}
                                                 optionArray={[{name: "基本保（自主品牌）"}, {name: "无忧保（自主品牌）"}, {name: "基本保（合资、进口）"}, {name: "无优保（合资、进口）"}]}/>);
            case 7:
                return (<CommonTextItem object={item} valueRenderer={this.renderValue.bind(this)} ref={'photoItem' + i}
                                        onClickedListener={() => this.onPhotoClicked(item, i)}/>);
            default:
                return (<InputTextItem object={item} autoCapitalize={'characters'} keyboardType={'default'}
                                       maxLength={17}/>);
        }
    }

    // 新增一个render属性给TextItem，这样可以自定义渲染效果
    renderValue(item) {
        const dataModel = Util.decodePhotoString(item);

        let status = '';
        for (let i = 0; i < dataModel.length; i++) {
            if (dataModel[i].localPic !== 'null')
                status += dataModel[i].name + ',';
        }
        return status;
    }

    // 点击到某一个photoItem的时候，push一个新界面进去，在route中传递Result回调
    onPhotoClicked(item, i) {
        Actions.CommonPhotoSelection(
            {
                name: 'CommonPhotoSelection',
                component: CommonPhotoSelection,
                title: item.name,
                optionString: item.value,
                onResultListener: (value) => this.onPhotoResult(item, value, i)
            }
        );
    }

    // 结果回调，接收的结果value, 另外一个index是用来传递一下点击了哪个
    onPhotoResult(item, value, index) {
        item.value = value;
        const viewString = Util.decodePhotoStringToViewString(value);
        this.refs['photoItem' + index].setState({
            v: viewString,
            highlight: viewString !== '正常',
        });
    }

    // ------------------------------------------------------------------------------------------------


    clickedNew() {
        Util.saveData('cars', Util.selectCar);
        Actions.RecordedCarList({type: ActionConst.PUSH_OR_POP});
    }
}